//价格管理
<template>
<div>
  <div class="head">
    <h3>价格管理</h3>
    <div>
      <el-button @click="DelSelect()" :plain="true">批量删除</el-button>
      <el-button @click="OpenAdd()">添加</el-button>
      <el-dialog :visible.sync="dialogadd" title="添加">
        <add-item :dialogadd.sync="dialogadd" @senddad="handleNewData"/>
      </el-dialog>
    </div>
  </div>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="105">
      <!-- selection是勾选框 -->
    </el-table-column>
    <el-table-column
      label="名字"
      width="200">
      <template slot-scope="scope">{{ scope.row.name }}</template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
    prop="repertory"
    label="库存"
    show-overflow-tooltip>
  </el-table-column >
    
    <el-table-column
    label="操作">
      <template slot-scope="scope">
        <el-button @click="dialogc=true">修改</el-button>
        <el-button @click="Del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  <el-dialog title="修改" :visible.sync="dialogc">
        <el-form :model="form">
            <el-form-item label="名字" >
            <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" >
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" >
                <el-input v-model="form.repertory" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogc= false">取 消</el-button>
            <el-button type="primary"  @click="Change()" :plain="true">确 定</el-button>
        </div>
    </el-dialog>
</div>
  </template>
  
  <script>
import AddItem from '@/components/ServeCom/AddItem.vue';


export default {
    data() {
      return {
        tableData: [{name:"纸钱1",price:99,repertory:'99'},
                    {name:"纸钱2",price:99,repertory:'99'},
                    {name:"入殓",price:99,repertory:'/'},
                    {name:"纸钱4",price:99,repertory:'99'},
          ],
        form:{name:'',price:'',repertory:''},
        dialogc:false,
        dialogadd:false,
        multipleSelection:[]
        }
      },
      components: {
          // 注册组件
          AddItem

        },
    methods:{
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },Change(){
        this.dialogc= false
        this.form={name:'',price:'',repertory:''}
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      },Del(row){
        const index=this.tableData.indexOf(row)
        this.tableData.splice(index,1)
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      },DelSelect(){
          console.log(this.multipleSelection);
          const selectedName = this.multipleSelection.map(row => row.name); //唯一标识name
          // map,可以理解成一种循环，对原来数组的每个对象都执行一次箭头函数的操作，返回一个新的变量
          // 这里的row是multipleSelection里的每一个变量,把row里的name都提出来，组成selectname

          console.log(selectedName);
          this.tableData = this.tableData.filter(row => !selectedName.includes(row.name)); 
          //filter:根据条件筛选数组里每一项，组成新的数组，
          const index=this.tableData.indexOf(row)
          this.tableData.splice(index,1)
          this.$message({
            message: '删除成功',
            type: 'success'
          });
      },OpenAdd(){
        this.dialogadd=true
      },handleNewData(formData) {
        this.tableData.push(formData)
        
    }
      }
    }
  </script>

<style lang="less" scoped>
.el-dialog{
  margin: 0;
  margin-top: 10vh !important;
}
.head{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between; 
    /*弹性盒子左右对齐*/
  align-items: center;
  margin-bottom: 2vh;

}

</style>

